<template>
  <div class="container">
    <div
      class="header animate__fadeInDown animate__animated"
      v-on:animationend="(e)=>{
      var target = e.target as HTMLElement;
      if(target){
        target.style.zIndex = '100';
      }
    }"
    >
      <layout-head
        :isCollapse="data.isCollapse"
        @switchCollapse="switchCollapse"
      ></layout-head>
    </div>
    <div class="body">
      <div class="menu animate__fadeInLeft animate__animated">
        <layout-menu
          :isCollapse="data.isCollapse"
          :menus="data.menus"
        ></layout-menu>
      </div>
      <div
        class="content animate__bounceInRight animate__animated"
        v-on:animationend="(e)=>{
      var target = e.target as HTMLElement;
      if(target){
        target.style.zIndex = '50';
      }
    }"
      >
        <breadcrumb
          class="animate__fadeInDownBig animate__animated"
        ></breadcrumb>
        <div class="home-content">
          <el-scrollbar class="home-content-scrollbar">
            <router-view></router-view>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import LayoutHead from './Head.vue';
import LayoutMenu from './Menu.vue';
import Breadcrumb from '@/components/Breadcrumb.vue';

var data = reactive({
  isCollapse: false,
  menus: [],
});
const switchCollapse = () => {
  data.isCollapse = !data.isCollapse;
};
</script>

<style scoped lang="scss">
.container {
  height: 100vh;
  overflow: hidden;
  background-color: #eee;
}
.header {
  position: relative;
  height: 10%;
  background-color: antiquewhite;
  z-index: 100;
}
.body {
  position: relative;
  height: 90%;
  display: flex;
  flex-direction: row;
  background-color: #eee;
  z-index: 50;
}
.menu {
  height: 100%;
  background-color: white;
}

.home-content {
  height: 90%;
}
.home-content-scrollbar {
  height: 100%;
}

.content {
  flex: 1;
  height: calc(100% - 2vw);
  margin: 1vw;
  background-color: white;
  overflow: auto;
  // 明显的阴影效果
  box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.3);
}
</style>
